<template>
  <div class="map-seekhouse">
    <!-- 头部导航栏 -->
    <NavbarComm title="地图找房" class="navbar" />
    <!-- 地图部分 -->
    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="initMap">
      <!-- 缩放控件 -->
      <bm-navigation
        anchor="BMAP_ANCHOR_TOP_RIGHT"
        type="BMAP_NAVIGATION_CONTROL_LARGE"
      ></bm-navigation>
      <!-- 比例尺控件 -->
      <bm-scale anchor="BMAP_ANCHOR_LEFT_RIGHT"></bm-scale>
      <!-- 自定义覆盖物 -->
      <!-- item是每个第一级城市信息 -->
      <bm-overlay
        v-for="(item, index) in subCities"
        :key="index"
        pane="labelPane"
        class="circle"
        :class="{ rect: isLast }"
        @draw="draw($event, item.coord)"
        @click.native="onClick(item)"
        @touchend.native="onClick(item)"
      >
        <!-- 提示文本 -->
        <div>
          <div :class="{ 'rect-content': isLast }">
            <p class="text-wrap">{{ item.label }}</p>
            <p style="margin-top: 5px">{{ item.count }}套</p>
          </div>
        </div>
      </bm-overlay>
      <!-- /自定义覆盖物 -->
      <!-- 房屋列表弹出层 -->
      <!-- v-if控制弹层关闭时候强制销毁，点击另一个房源列表才会更新房源列表数据 -->
      <van-popup
        v-if="isShowPopup"
        v-model="isShowPopup"
        position="bottom"
        :style="{ height: '60%' }"
      >
        <house-list :lastCitiesValue="lastCitiesValue" />
      </van-popup>
      <!-- /房屋列表弹出层 -->
    </baidu-map>
  </div>
</template>

<script>
import NavbarComm from '@/components/NavbarComm.vue'
import { mapState } from 'vuex'
import { getCityMapHouseApi } from '@/api'
import HouseList from '@/views/Map/components/HouseList.vue'
export default {
  name: 'MapIndex',
  components: { NavbarComm, HouseList },
  props: {},
  data() {
    return {
      center: { lng: 0, lat: 0 }, //用来控制每次的中心点
      zoom: 11, //缩放级别
      subCities: [], //一级城市
      isLast: false,
      index: 0, //控制城市的层级,0为一级城市
      lastCitiesValue: '', // 最后一级城市的value值
      isShowPopup: false //当点击最后一级时，显示房屋列表弹出层
    }
  },
  computed: {
    ...mapState(['curentCity']),
    ...mapState(['curentCityObj'])
  },
  watch: {},
  created() {},
  methods: {
    // 初始化BMap 核心类和 map 实例
    async initMap({ BMap, map }) {
      // 初始化城市地图图像信息
      this.initCity(BMap, map)
      // 发送请求获得当前城市信息,
      this.getCityHouse()
    },
    // 将当前城市地图解析出来
    initCity(BMap, map) {
      // const city = this.$route.query.city
      // 创建地址解析器实例
      const myGeo = new BMap.Geocoder()
      // 将地址解析结果显示在地图上，并调整地图视野
      myGeo.getPoint(
        this.curentCity, //存在vuex中的当前城市
        function (point) {
          if (point) {
            map.centerAndZoom(point, 11)
          } else {
            this.$toast.fail('地址解析失败！')
          }
        },
        this.curentCity //存在vuex中的当前城市
      )
    }, // 根据城市id获取相关房源
    async getCityHouse() {
      this.$toast.loading({
        message: '房源正在加载中...',
        forbidClick: true
      })
      // 获取当前城市的下一级区域
      const { data } = await getCityMapHouseApi(this.curentCityObj.value)
      // console.log(data.body)
      this.subCities = data.body
      // console.log('1', this.subCities)
    },
    // 地图发生改变时触发此事件，用于定位覆盖物的位置
    draw({ el, BMap, map }, { latitude, longitude }) {
      this.$toast.loading({
        message: '房源正在加载中...',
        forbidClick: true
      })
      const pixel = map.pointToOverlayPixel(new BMap.Point(longitude, latitude))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
    async onClick(itemcityInfo) {
      // console.log(itemcityInfo)
      // 从每个一级城市里面解构坐标并改名和地图中心点的默认一样，同时解构value用于发请求
      const {
        coord: { latitude: lat, longitude: lng },
        value
      } = itemcityInfo
      this.index++
      // index>=3就是最后一级的覆盖物
      if (this.index >= 3) {
        // 把点击的该城市value保存起来用于发请求拿下一级区域信息
        this.lastCitiesValue = value
        // 点击最后一级的覆盖物让房屋列表弹出层出现
        this.isShowPopup = true
        return //显示弹出层以后不执行后面代码
      }

      // 显示loading加载
      this.$toast.loading({
        message: '房源正在加载中...',
        forbidClick: true,
        duration: 0
      })

      // 请求数据更新覆盖用于渲染页面的数组, 将会导致自定义覆盖物重绘
      // 一定要放在调整缩放级别zoom,center前面,也不知道为啥 要不然触发不了draw
      const { data } = await getCityMapHouseApi(value)
      console.log(data.body)
      this.subCities = data.body

      // 重设地图中心点, 中心点为该点击的父城市
      this.center = { lng, lat }

      // 重设地图缩放比，默认是11
      if (this.index === 1) {
        // 第一次点击缩放比为13
        this.zoom = 13
      } else if (this.index === 2) {
        // 第二次点击缩放比为16 添加类名更改覆盖物样式，变成长方形
        this.isLast = true
        this.zoom = 16
      }

      // 每次更新完都显示loading加载缓冲一下
      this.$toast.loading({
        message: '房源正在加载中...',
        forbidClick: true,
        duration: 0
      })
    }
  }
}
</script>

<style scoped lang="less">
.map-seekhouse {
  padding-top: 100px;
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
  .bm-view {
    width: 100%;
    height: 1230px;
  }
  :deep(.BMap_stdMpType4 .BMap_stdMpZoom) {
    top: 1050px;
  }
}
.circle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(12, 181, 106, 0.9) !important;
  text-align: center;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  border: 2px solid #fff;
  padding: 10px;
  position: absolute;
}
.rect-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
  p:last-child {
    margin-top: 0 !important;
    margin-left: 2px;
  }
}
.text-wrap {
  width: 60px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rect {
  display: flex;
  width: 5rem !important;
  height: 1.5rem !important;
  padding: 0;
  background: rgba(12, 181, 106, 0.9);
  color: #fff;
  font-size: 12px;
  border-radius: 5px;
  margin: 5px;
}
</style>
